<template>
  <Component :auth="auth" :notNull="notNull" :field="field"
             :is="component" ref="refComponent" @fieldValueChange="fieldValueChange" />
</template>
<script setup>
import {ref, shallowRef, defineEmits, watchEffect} from 'vue';
import InputComponents from '@/components/form/InputComponents';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';

const props = defineProps({
  component: undefined,
  auth: {
    type: String,
    default: 'static'
  },
  notNull: {
    type: String,
    default: '0' //0表示非必填, 1表示必填
  },
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  }
});
const component = shallowRef();
const refComponent = ref();
const emits = defineEmits(['fieldValueChange']);

watchEffect(() => {
  console.log(props.component)
  component.value = InputComponents[props.component];
});

function getFieldValue(rowData) {
  return refComponent.value.getFieldValue(rowData);
}

function resetField() {
  return refComponent.value.resetField();
}

function setFieldValue(value, obj) {
  return refComponent.value.setFieldValue(value, obj);
}

function getFieldValueText() {
  return refComponent.value.getFieldValueText();
}

function fieldValueChange(field) {
  emits('fieldValueChange', field);
}

function getFieldValueWithCheck(rowData) {
  return refComponent.value.getFieldValueWithCheck(rowData);
}

defineExpose({
  getFieldValue,
  setFieldValue,
  resetField,
  getFieldValueText,
  getFieldValueWithCheck,
});
</script>
